<template>
	<div class="tag" :style="{background:color}">
		<h3>关于我</h3>
		<div class="tag-container">
			<div class="contact" v-for="(item, index) in aboutMeList" :key="index" :style="{ borderColor: item.color }">
				<div class="contact-left">
					<svg-icon class="contact-left-icon" :icon-class="item.icon" />
					<span class="contact-left-number" @click="open(item, index)">{{ item.number }}</span>
				</div>
				<div class="contact-right" :style="{ background: item.color }">
					{{ item.title }}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { isURL } from "@/utils/validate";
export default {
	props: {
		color: {
			type: String,
			default: () => 'transparent'
		}
	},
	data() {
		return {
			aboutMeList: [
				{ title: "QQ群", number: "999999999", color: "#eb6841", icon: "qq-group" },
				{ title: "QQ号", number: "927898639", color: "#5aa98f", icon: "qq" },
				{ title: "Email号", number: "J_longyan@163.com", color: "#51a0e2", icon: "email" },
				{ title: "Github", number: "https://github.com/longyanjiang", color: "#000000", icon: "github" },
				{ title: "Gitee", number: "https://gitee.com/jlongyan", color: "#c83838", icon: "gitee" },
				{ title: "掘金", number: "https://juejin.cn/user/3861140568811576", color: "#4b80fc", icon: "juejin" },
			],
		};
	},
	methods: {
		open(item) {
			const { number } = item;
			isURL(number) && window.open(number);
		},
	},
};
</script>
<style lang='scss' scoped>
.tag {
	// background: #fff;
	padding: 35px 30px;
	h3 {
		position: relative;
		cursor: pointer;
		padding-bottom: 15px;
		font-weight: 500;
		border-bottom: 2px solid #e8e8e8;
		&::before {
			content: "";
			width: 12%;
			height: 2px;
			position: absolute;
			bottom: 0px;
			left: 0;
			bottom: -1px;
			background: #000;
			transition: all 0.7s;
		}
		&:hover {
			&::before {
				width: 25%;
				transition: all 0.7s ease-in;
			}
		}
	}
	&-container {
		margin-top: 25px;
		display: flex;
		flex-direction: column;
		.contact {
			margin-bottom: 10px;
			// background: #fff;
			display: flex;
			align-items: center;
			height: 40px;
			border: 1px solid transparent;
			color: #525252;
			font-size: 14px;
			transition: all 0.5s;

			&-left {
				flex: 1;
				&-icon {
					margin: 0 8px;
				}
				&-number {
					cursor: pointer;
					&:hover {
						color: #00a7eb;
					}
				}
			}
			&-right {
				width: 85px;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				transition: all 0.5s;
				color: #fff;
			}
			&:hover {
				.contact-right {
					width: 100px;
				}
			}
		}
	}
}
</style>